<template>
    <div id="m">
        <div class="t">添加学生信息</div>
        <el-form ref="form" :model="student" label-width="80px">
        <el-form-item label="学生姓名">
            <el-input v-model="student.student_name"></el-input>
        </el-form-item>
        <el-form-item label="学生性别">
                <el-radio-group v-model="student.student_sex">
                    <el-radio-button label="1">男</el-radio-button>
                    <el-radio-button label="2">女</el-radio-button>
                </el-radio-group>
            </el-form-item>
        <el-form-item label="城市">
            <el-input v-model="student.city"></el-input>
        </el-form-item>
        <el-form-item label="班级" style="position: relative;">
            <el-select v-model="student.class_id" placeholder="请选择班级" style="position: absolute; right: 200px;" @change="getMajor()">
                <el-option v-for="c in classData" :key="c" :label="c" :value="c"></el-option>
            </el-select>
            <el-form-item style="display: inline-block; width: 130px; position: absolute; left: 250px;">
                <el-input v-model="major_name" :disabled="true"></el-input>
            </el-form-item>
        </el-form-item>
        
        <el-form-item>
            <el-button type="primary" @click="addStu" style="margin-top: 20px; margin-right: 60px;">添加</el-button>
            <el-button type="warning" @click="cancel">取消</el-button>
        </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        name:"AddStudent",
        data() {
            return {
                student: {
                    student_name:"",
                    student_sex:"1",
                    city:"",
                    class_id:"",
                },
                major_name:"",
                cmData:[],
                classData:[],
            }
        },
        created() {
            this.getData();
        },
        methods: {
            getData() {
                this.$axios({
                    methods:'get',
                    url:'http://localhost:8081/workbench/student/getData',
                }).then(res=>{
                    this.classData=res.data.data[0];
                    this.cmData=res.data.data[1]
                }).catch(err=>{
                    console.log(err);
                })
            },
            addStu() {
                this.$axios({
                    method:'post',
                    url:'http://localhost:8081/workbench/student/addStudent',
                    data:this.student
                }).then(res=>{
                    this.cancel();
                    console.log(res.data);
                }).catch(err=>{
                    console.log(err);
                })
            },
            cancel() {
                this.$router.replace({
                    path:'/home/student/query', 
                })
            },
            getMajor() {
                for(var i=0; i<this.cmData.length; i++) {
                    if (this.student.class_id==this.cmData[i].class_id) {
                        this.major_name=this.cmData[i].major_name;
                        console.log(this.major_name)
                    }
                }
            }
        }
    }
</script>

<style>
    #m {
        width: 700px;
        height: 630px;
        margin: 150px auto;
        border: 1px rgb(190, 190, 190) solid;
        border-radius: 20px;
        box-shadow: 10px 10px 5px rgba(205, 203, 203, 0.9);
        /* float: right; */
        z-index: 40;
        position: absolute;
        top: 0px;
        left: 500px;
        background-color: #ffffffee;
        font-weight: 800;
    }
    .t {
        font-weight: 800;
        margin: 50px 0px;
        font-size: 30px;
    }
</style>